<template>
    <div>
        <el-dialog title="请选择商品" @close="closeFun()" :visible.sync="listForms">
           
            
            <el-row class="rows">
                <el-col :lg='12' :md='24' :sm='24' :xs='24'>
                    <div>商品分类:
                        <el-select v-model="value" @change="seleFun" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :lg='12' :md='24' :sm='24' :xs='24'>
                    <div class="div2">
                        <span>商品搜索:</span><el-input v-model="input" placeholder="请输入内容"></el-input>
                        <el-button type="primary" size="mini" @click="searchFun" icon="el-icon-search"></el-button>
                    </div>
                </el-col>
            </el-row>
                <el-table
                    height="300"
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                    label="#"
                    width="55">
                    <template slot-scope="scope">
                        <div>
                            <el-radio v-model="radio" :label="scope.row.id" @change="changeFun(scope.row)">{{ }}</el-radio>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="商品ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="avatar"
                    label="图片"
                    width="180">
                    <template slot-scope="scope">
                        <div><img class="img" :src="scope.row.image"/></div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="store_name"
                    label="商品名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="cate_name"
                    label="商品分类">
                </el-table-column>
            </el-table>
             <el-pagination
                @current-change="handleCurrentChange"
                @prev-click="prevclick"
                @next-click="nextclick"
                :current-page="page"
                :page-size="limit"
                layout="total, prev, pager, next, jumper"
                :total="count">
            </el-pagination>
        </el-dialog>
    </div>
</template>
<script>
import {listarr,listTable} from '../api/index'
export default {
    props:['listForms'],
    created(){
        console.log(this.listForms);
    },
    data() {
        return {
            radio: '',
            input: '',
            tableData: [],
            options: [],
            value: '',
            count:0,
            page:1,
            limit:15,
            is_live:0,
            store_name:'',
            cate_id:''
        }
    },
    created(){
        this.list()
        this.table()
    },
    methods: {
        // 分页输入页码
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 下一页
        nextclick(val){
            this.page=val
            this.table()
        },
        // 上一页
        prevclick(val){
            this.page=val
            this.table()
        },
        // 搜索
        searchFun(){
            this.store_name=this.input
            this.table()
        },
        // 下拉分类点击
        seleFun(val){
            this.cate_id=val
            this.table()
        },
        // 下拉分类渲染
        list(){
            listarr(1).then((res)=>{
                if(res.data.status==200){
                    res.data.data.forEach(i => {
                        this.options.push({
                            value:i.id,
                            label:`${i.html}${i.cate_name}`
                        })
                    });
                }
            })
        },
        // 单选点击
        changeFun(row){
            this.radio=row.id
            this.listForms=false
            this.$emit('listT',{listForms:this.listForms,row:row})
            if(this.listForms==false){
                this.radio=''
            }
        },
        // table数据
        table(){
            listTable({page:this.page,limit:this.limit,is_live:this.is_live,store_name:this.store_name,cate_id:this.cate_id}).then((res)=>{
                if(res.data.status==200){
                    this.tableData=res.data.data.list
                    this.count=res.data.data.count
                }
            })
        },
        // 返回父元素
        closeFun(){
            this.listForms=false
            this.$emit('listS',{listForms:this.listForms})
        }
    },
}
</script>
<style lang="scss">
.rows{
    width: 100%;
    background: #f7f7f7;
    line-height: 50px;
}
.div2{
    display: flex;
    line-height: 50px;
    span{
        display: inline-block;
        width: 100px;
        line-height: 50px;
    }
    button{
        height: 40px;
        margin-top: 3px;
    }
    
}
.img{
        width: 50px;
        height: 50px;
        display: block;
    }
</style>